<script lang="ts" setup>
/**
 * 节点通用属性栏
 */
import { defineProps, onMounted, ref } from 'vue'
import { Cell } from '@antv/x6'
import { classUtil } from '@yk/components/draw/editor-draw/utils'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  cell: Cell
}>()

let _cell = toRaw(props.cell)

const interactingSelect = ref({
  disableDefaultMovable: false,
  disableSelect: false,
  disableEvent: false
})

onMounted(function () {
  init()
})

watch(() => props.cell, () => {
  _cell = toRaw(props.cell)
  init()
})

function init () {
  if (_cell.data.interactingSelect) {
    interactingSelect.value = _cell.data.interactingSelect
  } else {
    _cell.data.interactingSelect = interactingSelect.value
  }
}
watch(interactingSelect, () => {
  _cell.data.interactingSelect = interactingSelect.value
})

// region TODO 禁用事件
let attrsKey = ''
function disableEventChangeHandle () {
  if (!attrsKey) {
    if (_cell.view === 'vue-shape-view') {
      attrsKey = 'fo'
    } else {
      attrsKey = _cell.data.attrRoot
    }
  }
  if (Array.isArray(attrsKey)) {
    for (let i = 0; i < attrsKey.length; i++) {
      setClassName(attrsKey[i])
    }
  } else {
    setClassName(attrsKey)
  }
}
function setClassName (key: string) {
  const className = 'disable-event--pointer-events'
  const classList = classUtil.getClassList(_cell.attrs[key]?.class as string)
  if (interactingSelect.value.disableEvent) {
    classList.addClass(className)
  } else {
    classList.removeClass(className)
  }
  _cell.attr(key + '/class', classList.getClassName())
}
// endregion
</script>

<template>
  <div class="attr-grid" style="grid-template-columns: repeat(2, 1fr);">
    <el-form-item label="禁用默认移动">
      <el-switch v-model="interactingSelect.disableDefaultMovable" />
    </el-form-item>
    <el-form-item label="禁用选中">
      <el-switch v-model="interactingSelect.disableSelect" />
    </el-form-item>
    <el-form-item label="禁用事件">
      <el-switch v-model="interactingSelect.disableEvent" @change="disableEventChangeHandle" />
    </el-form-item>
    <el-form-item label="设为容器">
      <el-switch />
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
</style>
